<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动对内容进行放大 10 倍 并与输入框的内容进行同步</title>
</head>
<body>
<div id="app">
    <h2>当前的数值是：{{ number }}</h2>
    <h2>放到10后的值是：<span v-multiple="number"></span></h2>


    <button @click="--number">-1</button>
    <span></span>
    <button @click="++number">+1</button>


    <hr>
    <label for="num">
        <input type="text" name="num" id="" v-model="number" v-focus="number">
    </label>
</div>

<script type="module">
    import {createApp, ref} from "../../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let number = ref(1)
                return {
                    number
                }
            },

            directives: {
                /*"multiple":
                    {
                        // 挂载完成后调用
                        mounted(el, binding) {
                            el.innerText = binding.value * 10
                        }
                        ,
                        // 当数值发生变化的时候，调用
                        updated(el, binding) {
                            el.innerText = binding.value * 10
                        }
                        ,
                    }*/

                // 整个生命周期都使用相同的代码进行处理，就不需要在生命周期钩子函数中逐个进行重复编码了
                multiple(el, binding) {
                    el.innerText = binding.value * 10
                },

                focus(el, binding) {
                    el.innerText = binding.value
                    el.focus()
                }
            }
        }
    )


    /*app.directive(
        "multiple",
        {
            // 挂载完成后调用
            mounted(el, binding) {
                el.innerText = binding.value * 10
            },
            // 当数值发生变化的时候，调用
            updated(el, binding) {
                el.innerText = binding.value * 10
            },
        }
    )*/

    app.mount("#app")
</script>
</body>
</html>